<template>
  <div class="box">
    <div class="box_nav">
      <h1>品类管理</h1>
      <p class="button_nav">
        <el-button type="primary" size="small" icon="el-icon-edit" class="button">添加商品</el-button>
      </p>
      <p>当前商品分类ID：</p>
    </div>
    <!-- 商品分类 -->

    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%" stripe>
      <el-table-column prop="id" label="品类ID" width="130"></el-table-column>
      <el-table-column prop="name" label="品类名称" width="780"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small">修改名称</el-button>
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看其子品类</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <!-- <Page @pageadd="pageadd"></Page> -->
  </div>
</template>

<script>
import { HomeRight, Category } from "../../request/http";
// import Page from "../page/Page";
export default {
  data() {
    return {
      restaurants: [],
      state: "",
      input: "",
      tableData: [],
      stores: {
        pageNum: 1,
        pageSize: 7,
      },
    };
  },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    // // 分页
    // pageadd(page) {
    //   // console.log(page);
    //   this.stores.pageNum = page;
    //   // console.log(this.stores);
    //   Category(this.stores)
    //     .then((res) => {
    //       // console.log(res.data.data.list);
    //       this.tableData = res.data.data.list;
    //     })
    //     .catch((error) => {
    //       window.console.log(error);
    //     });
    // },
    loadAll() {
      return [
        { value: "按商品ID查询" },
        {
          value: "按商品名称查询",
        },
      ];
    },
    handleSelect(item) {
      console.log(item);
    },
    handleIconClick(ev) {
      console.log(ev);
    },
    handleClick(row) {
      console.log(row);
    },

    // formatSex(row, column, cellValue) {
    //  console.log(cellValue);
    //   if (cellValue == 1) {
    //     return "在售";
    //   } else if (cellValue == 2) {
    //     return "已下架";
    //   }
    // },
  },
  // components: {
  //   Page,
  // },
  mounted() {
    // this.restaurants = this.loadAll();
    Category(this.stores).then((res) => {
      console.log(res.data.data);
      this.tableData = res.data.data
    });
  },
};
</script>

<style lang="scss" scoped>
@import "@/Scss/index.scss";
.box {
  padding: 20px;
}
.button {
  // width: 100%;
  @include bgColor(#398dd6);
  @include FontOnly(16px);
}
.button:hover {
  @include bgColor(#2e6da4);
}
.box_nav {
  width: 100%;
  height: 110px;
  // display: flex;
}
.box_nav > h1 {
  font-size: 30px;
  font-weight: 400;
}
.button_nav {
  margin-left: 1000px;
  // float: right;
}
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
.box_input {
  display: flex;
  width: 40%;
  justify-content: space-between;
}
.scopeItem {
  background: orange;
  color: white;
  padding: 3px;
  margin-left: 5px;
  border-radius: 5px;
  font-size: 14px;
}
</style>